<template>
    <div :class="{ bg: true, modal }">
        <div class="container" :style="{ '--height': height, '--width': width }"
            :class="{ 'load-animation': loadAnimation }">
            <header>
                <slot name="header"></slot>
            </header>
            <hr>
            <main>
                <slot name="content"></slot>
            </main>
            <footer>
                <slot name="footer">
                    <RouterLink v-if="confirmTo" :to=confirmTo>
                        <Button :disabled="limitConfirm" size="min(32px,4vw)" bg-color="red" hovering-border>
                            <slot name="yes">确定</slot>
                        </Button>
                    </RouterLink>
                    <Button v-else-if="confirmAction" @click="confirmAction" :disabled="limitConfirm"
                        size="min(32px,4vw)" bg-color="red" hovering-border>
                        <slot name="yes">确定</slot>
                    </Button>
                    <RouterLink v-if="cancelTo" :to=cancelTo>
                        <Button :disabled="limitCancel" size="min(32px,4vw)" bg-color="#569CD6" hovering-border>
                            <slot name="no">返回</slot>
                        </Button>
                    </RouterLink>
                    <Button v-else-if="cancelAction" @click="cancelAction" :disabled="limitCancel" size="min(32px,4vw)"
                        bg-color="#569CD6" hovering-border>
                        <slot name="no">返回</slot>
                    </Button>
                </slot>
            </footer>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { DialogOptions } from '@/types/ui';
import Button from '@/components/ui/button.vue';
const {
    modal, loadAnimation,
    height = '80vh', width = '80vw',
    limitConfirm, limitCancel,
    confirmTo, cancelTo,
    confirmAction, cancelAction
} = defineProps<DialogOptions>()
</script>

<style scoped>
.bg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
}

.bg:not(.modal) {
    pointer-events: none;
}

.bg.modal {
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 1000;
}

.container.load-animation {
    transform: translateY(-100%);
    animation: drop 0.3s cubic-bezier(0.45, -0.14, 0.65, 1.6) forwards;
}

.container {
    width: var(--width, 80vw);
    height: var(--height, 70vh);
    border: max(2vw, 2vh) solid;
    border-image: url('/src/assets/img/border/01.webp') 150;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 56px;
    height: 10%;
    flex: none;
}

hr {
    width: 100%;
    border-image: linear-gradient(90deg, lightyellow, gold, yellow, gold, lightyellow) 1;
}

main {
    width: 100%;
    height: 80%;
    flex: none;
}

footer {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-shrink: 0;
}
</style>